<template>
  <div class="wrapper">
    <!-- Header部分 -->
    <header>
      <p>骑手注册</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">手机号码：</div>
        <div class="content">
          <input type="text" 
                 v-model="deliveryMan.deliveryManId"
                 placeholder="11位手机号码">
        </div>
      </li>
      <li>
        <div class="title">登录密码：</div>
        <div class="content">
          <input type="password" 
                 v-model="deliveryMan.password"
                 placeholder="设置6-20位密码">
        </div>
      </li>
      <li>
        <div class="title">确认密码：</div>
        <div class="content">
          <input type="password" 
                 v-model="confirmPassword"
                 placeholder="再次输入密码">
        </div>
      </li>
      <li>
        <div class="title">真实姓名：</div>
        <div class="content">
          <input type="text" 
                 v-model="deliveryMan.name"
                 placeholder="用于订单联系">
        </div>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="button-login">
      <button @click="register">立即注册</button>
    </div>
    <div class="button-switch">
      <button @click="$router.push('/deliverymanlogin')">已有账号？去登录</button>
    </div>

    <!-- 底部导航 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
  name: 'DeliverymanRegister',
  data() {
    return {
      deliveryMan: {
        deliveryManId: '',  // 对应数据库的deliveryManId
        password: '',       // 对应password字段
        name: ''            // 对应name字段
      },
      confirmPassword: ''
    }
  },
  methods: {
    // 手机号格式验证
    checkDeliveryManId() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      const numRegex = /^\d+$/;

      if (!numRegex.test(this.deliveryMan.deliveryManId)) {
        alert('手机号必须为纯数字');
        this.deliveryMan.deliveryManId = '';
        return;
      }

      if (!phoneRegex.test(this.deliveryMan.deliveryManId)) {
        alert('请输入有效的11位手机号');
        this.deliveryMan.deliveryManId = '';
        return;
      }

      
    },

    // 注册提交
    register() {
      // 表单验证
      if (!this.deliveryMan.deliveryManId) {
        alert('请输入手机号码');
        return;
      }
      if (this.deliveryMan.password.length < 6 || this.deliveryMan.password.length > 20) {
        alert('密码长度需为6-20位');
        return;
      }
      if (this.deliveryMan.password !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      if (!this.deliveryMan.name.trim()) {
        alert('请输入真实姓名');
        return;
      }

      // 提交注册
      this.$axios.post('/DeliveryMan/DeliveryManId', 
        this.$qs.stringify({
		deliveryManId: this.deliveryMan.deliveryManId,
		password: this.deliveryMan.password,
		name: this.deliveryMan.name
		}
		
		)
      ).then(response => {
        if (response.data.result > 0) {
          alert('注册成功');
          this.$router.push('/deliveryManLogin');
        } else {
          alert('注册失败，请检查信息');
        }
      }).catch(error => {
        console.error('注册失败:', error);
        alert('注册服务异常，请稍后重试');
      });
    }
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

/* Header样式 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 表单容器 */
.form-box {
  width: 100%;
  margin-top: 12vw;
  padding: 4vw 3vw 0;
  background: white;
}

.form-box li {
  padding: 3vw 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.form-box li:last-child {
  border-bottom: none;
}

/* 表单项样式 */
.title {
  flex: 0 0 22vw;
  font-size: 3.6vw;
  color: #333;
  font-weight: 500;
}

.content input {
  width: 100%;
  height: 8vw;
  border: none;
  outline: none;
  font-size: 3.6vw;
  padding: 1vw 0;
  background: transparent;
}

.content input::placeholder {
  color: #999;
}

/* 按钮样式 */
.button-login {
  margin: 6vw 3vw 0;
}

button {
  width: 100%;
  height: 12vw;
  border: none;
  border-radius: 6vw;
  font-size: 4.2vw;
  font-weight: 500;
  letter-spacing: 1px;
}

.button-login button {
  background: #0097FF;
  color: white;
  box-shadow: 0 2px 6px rgba(0,151,255,0.3);
}

.button-switch {
  margin: 4vw 3vw 0;
}

.button-switch button {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
}

/* 底部导航适配 */
.wrapper .footer {
  position: fixed;
  bottom: 0;
}
</style>